<template>
	<view class="wrapper">
		<back :back-title="backTitle"></back>
		<search :placeholder="placeholder" class="search" @click="handleSearch" :disabled="true" @showDate="handleShowDate" :searchContent="searchContent"></search>
		<view class="clean" @click.stop="handleClean">清除</view>
		<view class="list-group">
			<mescroll-uni :top="240" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp">
				<view class="list">
					<water-fall :list="dataList"></water-fall>
				</view>
			</mescroll-uni>
		</view>
		<w-picker 
			v-if="selectList.length!=0"
			mode="selector" 
			:defaultVal="[20]" 
			@confirm="onConfirm" 
			ref="selector" 
			themeColor="#f00"
			:selectList="selectList"
	 ></w-picker>
	</view>
</template>
<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import waterFall from '@/components/waterfall/index.vue'
	import {getList} from '../../api/waterfall.js'
	import wPicker from "@/components/w-picker/w-picker";
	export default {
		name: 'schoolfellow',
		components:{
			MescrollUni,
			waterFall,
			wPicker
		},
		data() {
			return {
				year: new Date().getFullYear(),
				backTitle: '校友录',
				placeholder: '按照毕业时间搜索',
				searchContent: '',
				search: null,
				downOption: {
				  use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				upOption: {
				  auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				  empty: {
						tip: '暂无相关数据',
						icon: '/static/images/common/404.png'
				  }
				},
				dataList: [],
				selectList: [],
				mescroll: null
			}
		},
		onLoad() {
			this.initSelect()
		},
		methods: {
			// 上拉
			async pullUp(mescroll) {
				this.mescroll = mescroll
				const {search} = this
			  let currentPage = mescroll.num; // 页码, 默认从1开始
			  let showCount = mescroll.size; // 页长, 默认每页10条
			  const res = await getList({currentPage,showCount, alumnusGraduationTime: search})
				let curPageData = res.list
			  let totalSize = res.total
				mescroll.endBySize(curPageData.length, totalSize);
			  if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			  this.dataList = this.dataList.concat(curPageData)
			},
			// 初始化日期
			initSelect(){
				const result = []
				const num = this.year - 1995
				const arr = Array.from(new Array(num).keys())
				arr.map((item,index) => {
					item = item + 1995
					result.push({
						label:item + '届',
						value: item
					})
				})
				result.push({
					label: this.year + '届',
					value: this.year
				})
				this.selectList = result
				console.log(this.selectList)
			},
			// 刷新
			pullRefresh(mescroll) {
			  mescroll.resetUpScroll();
			},
			handleShowDate() {
				this.$refs['selector'].show();
			},
			onConfirm(e) {
				const year = e.checkArr.value
				const d = new Date()
				d.setFullYear(year)
				this.search = d.getTime()
				console.log(this.search)
				this.searchContent = e.result
				this.pullRefresh(this.mescroll)
			},
			handleClean() {
				const {searchContent, mescroll} = this
				if (searchContent === '') {
					return
				} else {
					this.searchContent = ''
					this.search = null
					this.pullRefresh(mescroll)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrapper{
		width: 100%;
		min-height: 100vh;
		position: relative;
		.list-group{
			margin-top: 20upx;
			width: 100%;
			min-height: calc(100vh - 240upx);
			background-color: #f0f0f0;
		}
		.list{
			width: 100%;
			padding-top:20upx;
			box-sizing:border-box;
		}
	}
	.clean{
		position: absolute;
		top: 165upx;
		right: 50upx;
		color: #333;
		font-size: 28upx;
		z-index: 100;
		padding: 0 20upx;
		box-sizing: border-box;
	}
</style>